{% extends "base.html" %}


{% block content %}


<div class=info>
  <b>
  <pre id="status">

  </pre>
  </b>
</div>

<p>
<span>Position:</span>
<input id=pos type=range min="0" max="100" value="0" />
</p>

<p>
<span>Volume:</span>
<input id=vol type=range min="0" max="100" value="0" />
</p>

<p>
<button command="play" type=button class=midbutton>play</button>
<button command="pause" type=button  class=midbutton>pause</button>
<button command="prev" type=button  class=midbutton>prev</button>
<button command="next" type=button  class=midbutton>next</button>
</p>

<hr/>
<button command="kill" type=button  class=midbutton>kill</button>


<script>

function EventThrottle(fn, delay) {
  var timer = null;
  return function () {
    var context = this;
    var args = arguments;
    clearTimeout(timer);
    timer = setTimeout(function () {
      fn.apply(context, args);
    }, delay);
  };
}

$(function() {
    console.log("quodlibet setup");

    function SendCommand(command, value, callback) {
        console.log(command);
        if (callback) {
            $.get("/quodlibet_command",
                  {command: command, value: value}, callback);
        } else {
            $.get("/quodlibet_command",
                  {command: command, value: value});
        }
    }

    var throttle_timer = null;
    function ThrottledSendCommand(command, value, callback) {
        clearTimeout(throttle_timer);
        timer = setTimeout(function () {
                               SendCommand(command, value, callback);
                           }, 250);
    }

    function ButtonClick() {
         var command = $(this).attr("command");
         ThrottledSendCommand(command, "x", null);
    }

    function SetStatus(json_data, html_status) {
        var d = $.parseJSON(json_data);
        //console.log("command completed [" + status + "]");
        //console.log("command completed [" + data + "]");

        var info = d.title + " (" +  d.artist + " - " + d.album + ")";
        console.log("set info: " + info);
        $("#status").html(info);

        var vol = 100 * d.volume;
        console.log("set vol: " + vol);
        $("#vol").attr("value", vol);

        var pos = 100 * d.position;
        console.log("set pos: " + pos);
        $("#pos").attr("value", pos);
    }

    function UpdateStatus() {
        ThrottledSendCommand("status", "x", SetStatus);
    }

    $("button").click(ButtonClick);
    UpdateStatus();
    setInterval(UpdateStatus, 2000);

    function VolumeChange(e) {
        var j =  $(this);
        var value = j.attr("value");
        ThrottledSendCommand("change_volume", value);
        console.log("change_volume " +  value);
        // j.prev().text(value);
    }

    function PositionChange(e) {
        var j =  $(this);
        var value = j.attr("value");
        ThrottledSendCommand("change_position", value, null);
        // j.prev().text(value);
    }

    $("#vol").change(VolumeChange);
    $("#pos").change(PositionChange);


 });

 </script>

{% end %}
